<template>
  <div>
    Child
    <p>name is {{ name }}</p>
    <p>age is {{ age + 10 }}</p>
    <p>
      <span v-if="isMan">男士</span>
      <span v-else>女士</span>
    </p>
    <p>address {{ address }}</p>
    <p>persons: {{ persons }}</p>
    <p>
      <button @click="change">change</button>
    </p>
    <p>
      <button @click="sendValue">sendValue</button>
    </p>
  </div>
</template>

<script>
export default {
  // 不关心类型，就写成一个数组，不过这种虽说写法简单，但是无法对父组件传递过来的值，进行约束
  //   props: ['name', 'age', 'isMan', 'address', 'persons']
  // 下面这种写法，比较常见（类型是大写）
  //   props: {
  //     name: String,
  //     age: Number,
  //     isMan: Boolean,
  //     address: Object,
  //     persons: Array
  //   }
  // 下面这种写法，最常见，它是对我们类型更加具体的说明
  props: {
    name: {
      type: String,
      required: true // 必传属性
    },
    age: {
      type: Number,
      default: 100 // 默认值
    },
    isMan: Boolean,
    address: Object,
    persons: {
      type: Array,
      // 引用类型的默认值必须是一个函数，函数里面返回默认值
      default: () => ['欧阳峰', '丁春秋', '灭绝师太', '成昆']
    }
  },
  methods: {
    change () {
      // eslint：代码风格检查
      // 这里是尝试更改父组件传递过来的值，这个是不允许的，因为Vue传值，要遵循单向数据流
      // 父组件传递过来的值，子组件使用是可以的，但是不要去更改它
      // this.name = '李四'
    },
    // 传值给父组件
    sendValue () {
      // 子组件通过触发自定义事件，传值给父组件
      this.$emit('myevent', { name: '王五', hobby: ['打球', '看电视', '旅游'] })
    }
  }
}
</script>
